import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
import type { RootState } from '../store';
import { areEqual } from '@utils/utils';

// Define a type for the slice state
interface initialState {
    option: Header;
}

// Define the initial state using that type
const initialState = {
    option: { hidden: false },
} as initialState;

export const reducerSlice = createSlice({
    name: 'bread', // nameSpace
    initialState,
    reducers: {
        setOption: (state, action: PayloadAction<Header>) => {
            let isEqual = areEqual(state.option, action.payload);
            if (!isEqual) {
                state.option = action.payload;
            }
        },
    },
    extraReducers: {},
});

export const { setOption } = reducerSlice.actions;

// Other code such as selectors can use the imported `RootState` type
export const getOption = (state: RootState) => state.bread.option;

export default reducerSlice.reducer;
